<template>
	<!-- 搜索结果列表 -->
	<view>

		<!-- 筛选 S -->
		<view class="yh-h98 yh-zi10 level_align flex_around yh-bgf yh-fz30 yh-positionS yh-top0 yh-zi10">
			<view @click="changeFilt(1)" class="flex_center flex-1" :class="{'yh-fc333 yh-fz34 yh-fw600' : sort == 1}">
				综合
			</view>
			<view @click="changeFilt(2)" class="flex_center flex-1" :class="{'yh-fc333 yh-fz34 yh-fw600' : newest == 1}">
				最新
			</view>
			<view @click="changeFilt(3)" class="flex_center flex-1 level_align yh-fc333 yh-fz34 yh-fw600">
				价格
				<image v-if="price_sort == 0" src="../../static/icon/jiage_shang@3x.png" :lazy-load="true"
					class="jiantou yh-ml10" mode="">
				</image>
				<image v-if="price_sort == 1" src="../../static/icon/jiage_xia@3x.png" class="jiantou yh-ml10" mode="">
				</image>
			</view>
			<view @click="changeFilt(4)" class="flex_center flex-1 level_align yh-fc333 yh-fz34 yh-fw600">
				品牌
				<image v-if="!isBrand" src="../../static/icon/jiage_shang@3x.png" :lazy-load="true" class="jiantou yh-ml10" mode="">
				</image>
				<image v-if="isBrand" src="../../static/icon/jiage_xia@3x.png" class="jiantou yh-ml10" mode="">
				</image>
			</view>
			
			<view class="popup" :class="{hide:isBrand}">
				<view class="popup_ul">
					<view class="popup_li" :class="{active:index == brandIndex}" @click="selectBrangIndex(index)" v-for="(item,index) in brandList" :key="index">{{ item.title }}</view>
				</view>
			</view>
		</view>
		<!-- 筛选 E -->


		<!--list-->
		<view class="tui-product-list">
			<view class="tui-product-container">
				<block v-for="(item, index) in list" :key="index" v-if="(index + 1) % 2 != 0 || isList">
					<!--商品列表-->
					<view @click="pageJumps('/pages/home/goodsDetail?id=' + item.goods_id)" class="tui-pro-item"
						:class="[isList ? 'tui-flex-list' : '']" hover-class="tui-hover" :hover-start-time="150">
						<image :src="item.image" class="tui-pro-img"
							:class="[isList ? 'tui-proimg-list' : '']" mode="widthFix" />
						<view class="tui-pro-content">
							<view class="tui-pro-tit">{{ item.goods_name }}</view>
							<view>
								<view class="tui-pro-price">
									<text class="tui-sale-price">￥{{ item.goods_spec.goods_price }}</text>
									<text class="tui-factory-price">￥{{ item.goods_spec.line_price }}</text>
								</view>
								<!-- <view class="tui-pro-pay">{{ item.payNum }}人付款</view> -->
							</view>
						</view>
					</view>
					<!--商品列表-->
				</block>
			</view>
			<view class="tui-product-container" v-if="!isList">
				<block v-for="(item, index) in list" :key="index" v-if="(index + 1) % 2 == 0">
					<!--商品列表-->
					<view @click="pageJumps('/pages/home/goodsDetail?id=' + item.goods_id)" class="tui-pro-item"
						:class="[isList ? 'tui-flex-list' : '']" hover-class="tui-hover" :hover-start-time="150">
						<image :src="item.image" :lazy-load="true"
							class="tui-pro-img" :class="[isList ? 'tui-proimg-list' : '']" mode="widthFix" />
						<view class="tui-pro-content">
							<view class="tui-pro-tit">{{ item.goods_name }}</view>
							<view>
								<view class="tui-pro-price">
									<text class="tui-sale-price">￥{{ item.goods_spec.goods_price }}</text>
									<text class="tui-factory-price">￥{{ item.goods_spec.line_price }}</text>
								</view>
								<!-- <view class="tui-pro-pay">{{ item.payNum }}人付款</view> -->
							</view>
						</view>
					</view>
					<!--商品列表-->
				</block>
			</view>
		</view>
		<noData :noDataShow="noDataShow" hintText="暂无商品"></noData>
		<!--list-->
		
		<!--加载loadding-->
		<tui-loadmore v-if="loadding" :index="3" type="red"></tui-loadmore>
		<tui-nomore v-if="!pullUpOn" backgroundColor="#f7f7f7"></tui-nomore>
		<!--加载loadding-->

	</view>
</template>

<script>
	import noData from '@/components/noData.vue'
	export default {
		components: {
			noData
		},
		data() {
			return {
				id: '', // 商品分类id
				searchKey: '', //搜索关键词
				
				filt: 1, // 筛选的选择
				price_sort: 0, // 价格排序0=升序，1降序,
				newest: '', // 最新排序 1按最新排序
				sort: 1, // 综合 1
				
				isList: false, //是否以列表展示  | 列表或大图
				pageIndex: 1, // 当前页
				has_more: false, // 是否有更多
				loadding: false,
				pullUpOn: true,
				list: [],
				brand_id:'',//品牌id
				brandList:[],
				brandIndex:-1,//
				isBrand:false
			};
		},
		onLoad(opt) {
			if (opt.title) {
				uni.setNavigationBarTitle({
					title: opt.title ? opt.title : ''
				})
			}
			this.id = opt.id
			this.getBrandList()
		},
		onReachBottom: function() {
			if (!this.pullUpOn) return;
			this.loadding = true;
			if (!this.has_more) {
				this.loadding = false;
				this.pullUpOn = false;
			} else {
				this.pageIndex = this.pageIndex + 1;
				this.getGoodsList()
			}
		},
		onShow() {
			this.getGoodsList()
		},
		computed: {
			noDataShow() {
				return !this.list.length
			}
		},
		methods: {
			selectBrangIndex (index) {
				this.brandIndex = index
				this.pageIndex = 1
				this.isBrand = false
				this.brand_id = this.brandList[index].id
				this.getGoodsList()
			},
			getBrandList () {
				
				this.$http.post(this.$api.get_brand,{
					id:this.id
				}).then(res=>{
					this.brandList = res.data
				})
			},
			getGoodsList() { // 获取商品列表
				uni.showLoading({
					title: '加载中...'
				})
				this.$http.get(this.$api.categoryGoodsList, {
					id: this.id,
					newest: this.newest,
					sort: this.sort,
					price_sort: this.price_sort,
					page: this.pageIndex,
					size: 10,
					brand_id:this.brand_id
				}).then(res => {
					uni.hideLoading()
					this.loadding = false;
					if (res.code === 1) {
						this.has_more = res.data.has_more
						if (this.pageIndex > 1) {
							this.list = this.list.concat(res.data.data);
						} else {
							this.list = res.data.data
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			// 切换选择的筛选
			changeFilt(filt) {
				if (filt == 3) {
					this.price_sort = this.price_sort == '1' ? '0' : '1'
				} else if(filt == 2){
					this.newest = 1
					this.sort = ''
				} else if(filt == 1){
					this.newest = ''
					this.sort = 1
				} else if (filt == 4) {
					this.isBrand = !this.isBrand
					return
				}
				this.getGoodsList()
			},

		}
	}
</script>

<style lang="scss">
	.popup {
		width: 100%;
		position: absolute;
		background: #FFFFFF;
		transform: translateY(-100%);
		border-radius: 0rpx 0rpx 20rpx 20rpx;
		transition: all 0.2s ease; 
		.popup_ul {
			display: flex;
			flex-wrap: wrap;
			padding: 30rpx 24rpx;
			.popup_li {
				height: 48rpx;
				padding: 0 10rpx;
				color: #020125;
				font-size: 24rpx;
				text-align: center;
				line-height: 48rpx;
				margin: 0 60rpx 30rpx 0;
				background: #F4F4F4;
				border-radius: 24px;
			}
			.active {
				color: #FF0000;
				background: #FFF0F0;
			}
		}
	}
	.hide {
		transform: translateY(98rpx);
	}
	.jiantou {
		width: 17rpx;
		height: 9rpx;
	}

	.tui-product-list {
		display: flex;
		justify-content: space-between;
		flex-direction: row;
		flex-wrap: wrap;
		box-sizing: border-box;

		.tui-product-container {
			flex: 1;
			margin-right: 10rpx;
		}

		.tui-product-container:last-child {
			margin-right: 0;
		}

		.tui-pro-item {
			width: 100%;
			margin-bottom: 10rpx;
			background: #fff;
			box-sizing: border-box;
			border-radius: 12rpx;
			overflow: hidden;
			transition: all 0.15s ease-in-out;
		}

		.tui-flex-list {
			display: flex;
			margin-bottom: 1rpx !important;
		}

		.tui-pro-img {
			width: 100%;
			display: block;
		}

		.tui-proimg-list {
			width: 260rpx;
			height: 260rpx !important;
			flex-shrink: 0;
			border-radius: 12rpx;
		}

		.tui-pro-content {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			box-sizing: border-box;
			padding: 20rpx;
		}

		.tui-pro-tit {
			color: #2e2e2e;
			font-size: 26rpx;
			word-break: break-all;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
		}

		.tui-pro-price {
			padding-top: 18rpx;
		}

		.tui-sale-price {
			font-size: 34rpx;
			font-weight: 500;
			color: #e41f19;
		}

		.tui-factory-price {
			font-size: 24rpx;
			color: #a0a0a0;
			text-decoration: line-through;
			padding-left: 12rpx;
		}

		.tui-pro-pay {
			padding-top: 10rpx;
			font-size: 24rpx;
			color: #656565;
		}
	}
</style>
